<template>
	<view class="page">

		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
				<text>待上架(2)</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>在售中(3)</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>审核中(3)</text>
				<text class="line"></text>
			</view>

		</view>

		<view class="head">

			<view class="title" @click="isReturn=true">商品分类></view>
			<u-input v-model="model1.userInfo.return" disabled border="none"></u-input>
			<u-picker :show="isReturn" :columns="shopLists" @close="close1" @confirm="confirm1"></u-picker>

			<view class="edit" @click="isEdit = !isEdit">
				<text>批量</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item, index) in goodsList" @click="onSkip('goods')" :key="index">
					<view class="check" v-if="isEdit" @click="toggleCheck(index)">
						<text class="iconfont" :class="item.isChecked ? 'icon-checked' : 'icon-check'"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{ item.name }}</text>
							</view>
							<view class="description">
								累计销量：{{0}} 库存：{{0}}
							</view>
							<view class="price-num">
								<view class="price">

									<text class="max">{{ item.price }}元</text>

								</view>
								<view class="edit" @click="openPaymentDialog">
									靠前
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

		</mescroll-body>
		<!-- 弹框 -->

		<u-popup :show="showPaymentDialog" mode="center">
			<view class="popup-content">

				<image style="width: 200rpx;height: 200rpx;"
					src="http://192.168.1.2:8360/static/wximg/static/wx_pay.png" mode="">
				</image>

				<view class="popup-title">发到手机微信支付</view>
				<view class="popup-description">请确认支付金额</view>
				<view class="popup-amount">金额：{{ amount }} 元</view>
				<view class="payment" @click="initiatePayment">二维码支付</view>
				<view class="cancel" @click="closeDialog">取消</view>
			</view>
		</u-popup>
		<!-- 属性规格 -->
		<goods-attr ref="GoodsAttr"></goods-attr>



	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				showPaymentDialog: false, // 控制弹框显示
				amount: 100, // 支付金额，可以根据需要进行动态设置
				OrderType: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				isReturn: false,
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				shopLists: [
					['瓷器', '书画', '玉器', '玛瑙', '佛像', '珠宝', '茶叶', '杂项', '农副产品']
				],
				show: false,
				model1: {
					userInfo: {

						return: '',
					},
				},
				isEdit: false,
				goodsList: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
						price: '219.00',
						vip_price: '129.00',
						img: '',
						attributes: ['金色', '大尺码'],
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
						price: '139.00',
						vip_price: '99.00',
						attributes: ['银色', '中尺码'],
						img: '',
						is_goods: 1,
						isChecked: false,
					},
					{
						id: 1,
						name: '戴尔(DELL)成就3681英特尔酷睿i5商用办公高性能台式机电脑整机(十代i5-10400 8G 1T 三年上门售后)21.5英寸',
						price: '3699.00',
						attributes: ['银色', '中尺码'],
						vip_price: '3600.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '戴尔DELL灵越5000 14英寸酷睿i5网课学习轻薄笔记本电脑(十代i5-1035G1 8G 512G MX230 2G独显)银',
						price: '4888.00',
						attributes: ['银色', '中尺码'],
						vip_price: '4999.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '联想(Lenovo) 来酷 Lecoo一体台式机电脑23英寸(J4105 8G 256G SSD 三年上门）白',
						price: '4888.00',
						attributes: ['银色', '中尺码'],
						vip_price: '3600.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: 'Apple 2020新款 MacBook Pro 13.3【带触控栏】十代i5 16G 512G 2.0GHz 深空灰 笔记本电脑 轻薄本 MWP42CHA',
						price: '18200.00',
						vip_price: '18200.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
				],
				showDetailItem: null,

			}
		},
		onReady() {
			uni.hideTabBar()
		},
		computed: {
			allSelected() {
				return this.goodsList.every(item => item.isChecked);
			},
			selectedItemCount() {
				return this.goodsList.filter(item => item.isChecked).length;
			},

		},

		methods: {


			//选择商品分类
			close1() {
				this.isReturn = false; // 关闭选择器
			},
			confirm1(selectedItems) {
				// selectedItems 是选中的商品类目

				this.model1.userInfo.return = selectedItems.value; // 更新输入框的值为选中的商品类目
				console.log('哈哈哈哈', selectedItems.value);
				this.isReturn = false; // 关闭选择器
			},

			onOrderTab(type) {
				this.OrderType = type;
				// #ifdef H5
				uni.redirectTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
				//#endif

			},

			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},

			// 选择sku

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toggleCheck(index) {
				this.goodsList[index].isChecked = !this.goodsList[index].isChecked;
			},
			toggleSelectAll() {
				const newState = !this.allSelected;
				this.goodsList.forEach(item => {
					item.isChecked = newState;
				});
			},

			deleteSelectedItems() {
				this.goodsList = this.goodsList.filter(item => !item.isChecked); // 删除所有选中的商品
			},

			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			},
			//微信支付
			openPaymentDialog() {
				console.log('888888');
				this.showPaymentDialog = true; // 显示支付弹框
			},
			closeDialog() {
				this.showPaymentDialog = false; // 关闭支付弹框
			},
			initiatePayment() {
				// 调用微信支付接口，假设你的后端返回了需要的支付参数
				const paymentData = {
					timeStamp: '1234567890', // 时间戳
					nonceStr: 'abc123', // 随机字符串
					package: 'prepay_id=wx1234567890', // 预支付交易会话标识
					signType: 'MD5', // 签名方式
					paySign: 'abcdefg1234567', // 签名
				};

				uni.requestPayment({
					...paymentData,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
						});
						this.closeDialog(); // 关闭弹框
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none',
						});
						console.error(err);
					},
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	@import 'stepForward.Scss';



	.popup-content {
		padding: 20px;
		text-align: center;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
	}

	.popup-description {
		margin: 10px 0;
	}

	.popup-amount {
		font-size: 16px;
		color: #333;
		margin-bottom: 20px;
	}

	.payment {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: springgreen;
	}

	.cancel {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;

	}
</style>